<!-- frontend/src/components/ChatHistory.vue -->
<template>
  <div class="history">
    <div class="toolbar">
      <div class="title">会话历史记录</div>
      <button class="btn ghost" @click="onCreate" :disabled="store.streaming">新建</button>
    </div>

    <ul class="list">
      <li
        v-for="s in sessions"
        :key="s.id"
        :class="['item', s.id === currentSessionId ? 'active' : '']"
        @click="onOpen(s.id)"
        :title="s.title"
      >
        <div class="left">
          <div class="name">{{ s.title || '未命名' }}</div>
          <div class="meta">{{ fmt(s.updated_at) }}</div>
        </div>
        <div class="ops">
          <button class="btn ghost sm" @click.stop="onRename(s.id, s.title)">重命名</button>
          <button class="btn danger sm" @click.stop="onRemove(s.id)">删除</button>
        </div>
      </li>

      <li v-if="!sessions.length" class="empty">暂无会话</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useChatStore } from '@/stores/chat';
import { storeToRefs } from 'pinia';

const store = useChatStore();
const { sessions, currentSessionId } = storeToRefs(store); // ✅ 保持响应式

onMounted(async () => {
  // 加载时仅拉列表，不自动选中任何会话
  await store.fetchSessions();
});

async function onOpen(id: string){
  // if (store.streaming) return;
  // await store.selectSession(id);
  if (store.streaming) return;
  store.setShowMedicalPanel(false); // 添加这一行，切换到普通聊天模式
  await store.selectSession(id);
}

async function onCreate(){
  if (store.streaming) return;
  await store.createSession();       // 后端当前不收 title，这里不传
  // 保持不自动重命名；需要的话后面再做“用首条消息做标题”
}

async function onRename(id: string, oldTitle: string){
  const title = prompt('输入新名称', oldTitle || '')?.trim();
  if (!title) return;
  await store.renameSession(id, title); // 本地更新 + 置顶
}

async function onRemove(id: string){
  if (!confirm('确认删除该会话？')) return;
  await store.deleteSession(id);        // 本地移除；若删的是当前会话会清空消息
}

function fmt(iso: string){
  const d = new Date(iso);
  const mm = String(d.getMonth()+1).padStart(2,'0');
  const dd = String(d.getDate()).padStart(2,'0');
  const hh = String(d.getHours()).padStart(2,'0');
  const mi = String(d.getMinutes()).padStart(2,'0');
  return `${mm}-${dd} ${hh}:${mi}`;
}
</script>

<style scoped>
.history{ display:grid; grid-template-rows:auto 1fr; gap:8px; padding:8px; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; }
.title{ font-weight:600; }
.list{ margin:0; padding:0; list-style:none; overflow:auto; }
.item{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px; border-radius:10px; cursor:pointer;
}
.item:hover{ background:#f7f9fd; }
.item.active{ background:#eef6ff; border:1px solid #d7e7ff; }
.left{ min-width:0; }
.name{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta{ font-size:12px; color:#6b7280; }
.ops{ display:flex; gap:6px; }
/* 修复新建按钮样式 */
.toolbar .btn.ghost{
  height:32px; 
  padding:0 10px; 
  border-radius:8px; 
  border:1px solid #e5e7eb; 
  background:#fff; 
  color:#374151; 
  cursor:pointer;
  min-width:40px;
  z-index:10;
}
.toolbar .btn.ghost:hover{
  border-color:#d1d5db;
  background:#f9fafb;
}
/* 修复重命名按钮样式，设置为黑色字体，并增大尺寸 */
.btn.ghost.sm{
  height:30px; /* 比删除按钮高2px */
  padding:0 10px; /* 左右内边距更大 */
  font-size:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#000; /* 黑色字体 */
  cursor:pointer;
  min-width:60px; /* 宽度比删除按钮大 */
  font-weight:500;
}
.btn.ghost.sm:hover{
  border-color:#d1d5db;
  background:#f9fafb;
}
/* 优化删除按钮样式，增强文字在红色背景上的显示效果 */
.btn.danger.sm{
  height:28px;
  padding:0 8px;
  font-size:12px;
  border:1px solid #fecaca;
  background:#fee2e2; /* 稍微浅一点的红色背景，让文字更明显 */
  color:#b91c1c; /* 更深的红色文字 */
  cursor:pointer;
  min-width:50px;
  font-weight:600; /* 加粗文字 */
}
.btn.danger.sm:hover{
  background:#fecaca;
  border-color:#fca5a5;
}
.empty{ color:#9ca3af; padding:12px; text-align:center; }
/* .history{ display:grid; grid-template-rows:auto 1fr; gap:8px; padding:8px; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; }
.title{ font-weight:600; }
.list{ margin:0; padding:0; list-style:none; overflow:auto; }
.item{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px; border-radius:10px; cursor:pointer;
}
.item:hover{ background:#f7f9fd; }
.item.active{ background:#eef6ff; border:1px solid #d7e7ff; }
.left{ min-width:0; }
.name{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta{ font-size:12px; color:#6b7280; }
.ops{ display:flex; gap:6px; }
.btn{ height:32px; padding:0 10px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }

.btn.danger{ border-color:#fecaca; color:#b91c1c; }
.btn.sm{ height:28px; padding:0 8px; font-size:12px; }
.empty{ color:#9ca3af; padding:12px; text-align:center; } */
</style>
